<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button icon="el-icon-plus" type="primary" @click="onNew">{{
          operateType.add
        }}</el-button>
      </div>
      <el-table
        :data="tableDatas"
        element-loading-text="Loading"
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        height="calc(100% - 190px)"
        style="width: 100%"
      >
        <el-table-column align="center" width="50">
          <template #header>
            <div class="filter-icon" :title="operateType.screen">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column :label="airBottle.airBottleNumber">
          <el-table-column prop="num">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.num"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="airBottle.airBottleRemark">
          <el-table-column prop="remark">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column :label="airBottle.status">
          <el-table-column prop="statusName">
            <template #header>
              <el-select v-model="queryForm.status">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.statusName }}</span>
            </template></el-table-column
          ></el-table-column
        >

        <el-table-column :label="airBottle.storageGas">
          <el-table-column prop="MaterialManageName">
            <template slot-scope="scope">
              <span>{{ scope.row.materialManageName }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="airBottle.gasNumber">
          <el-table-column prop="materialManageNum">
            <template slot-scope="scope">
              <span>{{ scope.row.materialManageNum }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column :label="airBottle.storageWarehouse">
          <el-table-column prop="recordPerson">
            <template #header>
              <el-select v-model="queryForm.wareHouseId">
                <el-option
                  key="0"
                  :label="operateType.all"
                  value="0"
                ></el-option>
                <el-option
                  v-for="item in wareHouseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.wareHouseName }}</span>
            </template>
          </el-table-column></el-table-column
        >

        <el-table-column :label="airBottle.createTime">
          <el-table-column prop="createTime">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template></el-table-column
          ></el-table-column
        >
        <el-table-column :label="operateType.search">
          <el-table-column width="140">
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="onQuery">{{
                  operateType.search
                }}</el-link>
                <el-link @click="cancelForm">{{
                  operateType.resetting
                }}</el-link>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link
                  v-if="scope.row.status == 10"
                  size="mini"
                  type="danger"
                  @click="handleEdit(scope.row)"
                  >{{ airBottle.scrap }}</el-link
                >
              </div>
            </template></el-table-column
          ></el-table-column
        ></el-table
      >
      <AirBottleAdd
        v-if="dialogFormVisible"
        :dialog-form-visible.sync="dialogFormVisible"
        @getList="getList"
      ></AirBottleAdd>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getList, update } from "../../../api/AirBottle/AirBottle.js";
import { getPageList } from "../../../api/Storage";
import AirBottleAdd from "./AirBottleAdd.vue";
import { formatTime } from "../../../utils/time";

export default {
  name: "AirBottleList",
  components: { AirBottleAdd },
  data() {
    return {
      loading: true,
      showFilterRow: false,
      dialogFormVisible: false,
      statusList: [
        { label: this.$t("ModuleSysBusiness.OperateType.all"), value: "0" },
        { label: this.$t("AirBottle.notStorage"), value: "10" },
        { label: this.$t("AirBottle.alreadyStock"), value: "20" },
        { label: this.$t("AirBottle.scrapped"), value: "30" },
      ],
      formatTime,
      tableDatas: [],
      queryForm: {
        num: "",
        status: "0",
        wareHouseId: "0",
      },
      wareHouseList: [],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    airBottle() {
      return this.$t("AirBottle") || {};
    },
  },
  created() {
    this.getPageList();
    this.getList();
  },
  methods: {
    getPageList() {
      getPageList({ type: 2, pageIndex: 1, pageSize: 1000 }).then((res) => {
        this.wareHouseList = res.data.dataList;
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    // 清空筛选条件
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.pagination.pageIndex = 1;
      this.getList("filter");
    },
    handleEdit(row) {
      update({ id: row.id, status: 30, num: row.num })
        .then((re) => {
          this.getList();
        })
        .catch((res) => {});
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.tableDatas = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.dialogFormVisible = true;
    },

    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },

    onQuery() {
      this.pagination.pageIndex = 1;

      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.ellipsis-text {
  width: 150px; /* 设置宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
